<template>
  <h2>watch</h2>
  <p>{{ count }}</p>
  <button @click="add">btn</button>
  <p>{{ obj }}</p>
  <button @click="add2">btn2</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const count = ref(3);
    const add = () => {
      count.value++;
    };

    const obj = ref({ a: 3, b: 4 });
    const add2 = () => {
      obj.value.a = 30;
    };

    //todo watch也变成了函数调用
    //todo 第一个参数是监听的响应式数据, 第二个参数是回调函数
    //todo 第三个参数是一个可选的配置对象
    watch(
      obj,
      (val) => {
        console.log("val:", val);
      },
      {
        // 复杂类型的深度监听
        deep: true,
        // 开始的时候先做一次
        immediate: true,
      }
    );

    return { count, add, add2, obj };
  },

  // watch: {
  //   count(val, oldVal) {}
  // }
  // watch: {
  //   count: {
  //     handler() {},
  //     deep: true
  //   }
  // }
};
</script>
